<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body>
    <div class="max-w-7xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-stretch md:grid-cols-3 md:gap-8">
        <div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
          <div class="p-6 sm:px-8">
            <h2 class="text-lg font-medium text-gray-900">
              Starter
              <span class="sr-only">Plan</span>
            </h2>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

            <p class="mt-2 sm:mt-4">
              <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 20$ </strong>

              <span class="text-sm font-medium text-gray-700">/month</span>
            </p>

            <a
              class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
              href="#"
            >
              Get Started
            </a>
          </div>

          <div class="p-6 sm:px-8">
            <p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>

            <ul class="mt-2 space-y-2 sm:mt-4">
              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> 10 users </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> 2GB of storage </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Email support </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-red-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>

                <span class="text-gray-700"> Help center access </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-red-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>

                <span class="text-gray-700"> Phone support </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-red-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>

                <span class="text-gray-700"> Community access </span>
              </li>
            </ul>
          </div>
        </div>

        <div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
          <div class="p-6 sm:px-8">
            <h2 class="text-lg font-medium text-gray-900">
              Pro
              <span class="sr-only">Plan</span>
            </h2>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

            <p class="mt-2 sm:mt-4">
              <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 30$ </strong>

              <span class="text-sm font-medium text-gray-700">/month</span>
            </p>

            <a
              class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
              href="#"
            >
              Get Started
            </a>
          </div>

          <div class="p-6 sm:px-8">
            <p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>

            <ul class="mt-2 space-y-2 sm:mt-4">
              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> 20 users </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> 5GB of storage </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Email support </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Help center access </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-red-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>

                <span class="text-gray-700"> Phone support </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-red-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>

                <span class="text-gray-700"> Community access </span>
              </li>
            </ul>
          </div>
        </div>

        <div class="divide-y divide-gray-200 rounded-2xl border border-gray-200 shadow-xs">
          <div class="p-6 sm:px-8">
            <h2 class="text-lg font-medium text-gray-900">
              Enterprise
              <span class="sr-only">Plan</span>
            </h2>

            <p class="mt-2 text-pretty text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

            <p class="mt-2 sm:mt-4">
              <strong class="text-3xl font-bold text-gray-900 sm:text-4xl"> 100$ </strong>

              <span class="text-sm font-medium text-gray-700">/month</span>
            </p>

            <a
              class="mt-4 block rounded-sm border border-indigo-600 bg-indigo-600 px-12 py-3 text-center text-sm font-medium text-white hover:bg-transparent hover:text-indigo-600 sm:mt-6"
              href="#"
            >
              Get Started
            </a>
          </div>

          <div class="p-6 sm:px-8">
            <p class="text-lg font-medium text-gray-900 sm:text-xl">What's included:</p>

            <ul class="mt-2 space-y-2 sm:mt-4">
              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> 50 users </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> 20GB of storage </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Email support </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Help center access </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Phone support </span>
              </li>

              <li class="flex items-center gap-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="size-5 text-indigo-700"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                </svg>

                <span class="text-gray-700"> Community access </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
